<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		i,em{font-style: normal;}
		b,strong{font-weight: normal;}
		ul,ol,li{list-style: none;}
		h1,h2,h3,h4,h5,h6{font-size:16px;font-weight: normal;}
		p{padding-top:50px;text-align: center;}
		#calc{
			width: 214px;
			height: 306px;
			/*margin: 100px auto;*/
			background: #bad2ea;
			border: 1px solid #343434;
			border-radius: 3px;
			padding: 9px 7px 7px;
			position: absolute;
			left: 50%;
			top: 100px;
			transform: translateX(-50%);
		}
		#top{
			height: 20px;
			background: #bad2ea;
		}
		#top img{
			padding-left: 4px;
			float: left;
		}
		#top h1{
			font-size: 12px;
			color: #000;
			line-height: 12px;
			padding: 2px 0 0 6px;
			float: left;
		}
		#top .bt{
			float: right;
		}
		#top .bt span{
			display: block;
			float: left;
			width: 31px;
			height: 17px;
			margin-right: 2px;
			background: url(images/topbt1.jpg);
		}
		#top .bt span:nth-of-type(2){
			background: url(images/topbt2.jpg);
		}
		#top .bt span:nth-of-type(3){
			background: url(images/topbt3.jpg);
		}
		#top .bt span:nth-of-type(1):hover{
			background: url(images/bt1_1.jpg);
		}
		#top .bt span:nth-of-type(3):hover{
			background: url(images/bt3_1.jpg);
		}
		#top .bt span:nth-of-type(1):active{
			background: url(images/bt1_2.jpg);
		}
		#top .bt span:nth-of-type(3):active{
			background: url(images/bt3_2.jpg);
		}
		#nav{
			width: 212px;
			height: 19px;
			background: url(images/navbg_03.jpg) repeat-x center;
			border-bottom: 1px solid #b6bccc;
		}
		#nav li{
			float: left;
			width: 50px;
			height: 17px;
			font-size: 12px;
			color: #000;
			line-height: 17px;
			text-align: center;
			border: 1px solid rgba(0,0,0,0);
			border-radius: 3px;
			margin-right: 5px;
			cursor: default;
		}
		#nav li:hover{
			border-color: #9499a5;
		}
		#section{
			width: 190px;
			height: 243px;
			padding: 10px 11px 0;
			background: #ecf3fc;
			border-top:1px solid #f0f0f0;
		}
		/*显示框*/
		#text1,#text2{
			width: 183px;
			height: 22px;
			border:1px solid #8e9cad;
			border-radius: 2px 2px 0 0;
			padding-right: 5px;
			outline: none;
			background: #f8fafe;
			
			text-align: right;
		}
		#text1{
			border-bottom: 0;
			font-size: 14px;
			line-height: 22px;
		}
		#text2{font-weight: bold;
			height: 28px;
			border-top: 0;
			border-radius: 0 0 2px 2px;
			font-size: 18px;
		}
		#section{
			padding-bottom: 12px;
			position: relative;
		}
		#section table{
		}
		#section table td{
			display: block;
			float: left;
			width: 34px;
			height: 27px;
			margin: 5px 5px 0 0;
		}
		#section table tr td:last-child{
			margin: 5px 0 0 0;
		}
		#section table td input{
			width: 34px;
			height: 27px;
			background: #d5e0ed;
			outline: none;
			border:1px solid #8797aa;
			border-radius: 3px;
			transition:0.2s all;
		}
		/*不同键不同背景颜色*/
		#section .function{
			background: #e6edf5;
		}
		#section .num{
			background: #f4f9fc;
		}
		#section table td input:hover{
			background: #ffe87e;
		}
		#section table td input:active{
			background: #f4c963;
		}
		#section .result,#section .result input{
			height: 59px;
		}
		#section .zero,#section .zero input{
			width: 73px;
		}
		#section .ab{
			position: absolute;
			bottom: 11px;
		}
	</style>
</head>
<body>
	<p>实现了整数的加,减和乘功能;功能键的<--,CE,C</p>
	<div id="calc">
		<div id="top">
			<img src="images/mspaint_03.jpg" alt="">
			<h1>计算器</h1>
			<div class="bt">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<ul id="nav">
			<li>查看(V)</li>
			<li>编辑(E)</li>
			<li>帮助(H)</li>
		</ul>
		<div id="section">
			<form action="">
				<input id="text1" type="text" value="" disabled>
				<input id="text2"  type="text" value="0" disabled>
				<table width="190" height="187" cellspacing="0" cellpadding="0">
					<tr>
						<td><input class="m" type="button" value="MC"></td>
						<td><input class="m" type="button" value="MR"></td>
						<td><input class="m" type="button" value="MS"></td>
						<td><input class="m" type="button" value="M+"></td>
						<td><input class="m" type="button" value="M-"></td>
					</tr>
					<tr>
						<td><input id="del" class="function" type="button" value="<--"></td>
						<td><input class="function" id="ce" type="button" value="CE"></td>
						<td><input class="function" id="c" type="button" value="C"></td>
						<td><input class="function" type="button" value="±"></td>
						<td><input class="function" type="button" value="√"></td>
					</tr>
					<tr>
						<td><input class="num" type="button" value="7"></td>
						<td><input class="num" type="button" value="8"></td>
						<td><input class="num" type="button" value="9"></td>
						<td><input class="function" type="button" value="/"></td>
						<td><input class="function" type="button" value="%"></td>
					</tr>
					<tr>
						<td><input class="num" type="button" value="4"></td>
						<td><input class="num" type="button" value="5"></td>
						<td><input class="num" type="button" value="6"></td>
						<td><input id="multiply" class="function" type="button" value="*"></td>
						<td><input class="function" type="button" value="1/x"></td>
					</tr>
					<tr>
						<td><input class="num" type="button" value="1"></td>
						<td><input class="num" type="button" value="2"></td>
						<td><input class="num" type="button" value="3"></td>
						<td><input id="reduce" class="function" type="button" value="-"></td>
						<td class="result function" rowspan="2"><input id="res" type="button" value="="></td>
					</tr>
					<tr class="ab">
						<td class="zero" colspan="2"><input id="zero" class="num" type="button" value="0"></td>
						<td><input class="num" type="button" value="."></td>
						<td><input id="add" class="function" type="button" value="+"></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</body>
<script type="text/javascript">
	//计算器窗口
//	var calc = document.querySelector("#calc");
//	var top = document.querySelector("#top");
//	//
//	var x = 0,y = 0,offsetX=0,offsetY=0,isDown=false;
//	top.addEventListener("mousedown", function(e) {
//		offsetX = e.offsetX
//		offsetY = e.offsetY
////		x = e.clientX - offsetX;
////		y = e.clientY - offsetY;
////		calc.style.left = x + "px";
////		calc.style.top = y + "px";
//		isDown = true;
//		document.addEventListener("mousemove", function(e) {
//			if(!isDown) {
//				return;
//			}
//			x = e.pageX - offsetX;
//			y = e.pageY - offsetY;
//			calc.style.left = x + "px";
//			calc.style.top = y + "px";
//		});
//		document.addEventListener("mouseup", function(e) {
//			isDown = false;
//		});
//	});
	
	//screenX 代表整个屏幕
	//pageX 代表的是整个页面（包括滚动区域），除掉地址栏和标题栏。
	//clientX 代表当前可视区域
	//offsetX 代表标签自己的区域
	
	//显示框
	var text1 = document.querySelector("#text1");
	var text2 = document.querySelector("#text2");
	//MC MR MS M+ M-
	var m_btn = document.querySelectorAll(".m");
	for (var i = 0; i < m_btn.length; i++) {
		m_btn[i].addEventListener("click",function(){
			alert("这是"+this.value+"功能键，此功能还未实现");
		});
	}
	//清空text2
	var ce = document.querySelector("#ce");
	//重置
	var c = document.querySelector("#c");
	//删除
	var del = document.querySelector("#del");
	//加
	var add = document.querySelector("#add");
	//减
	var reduce = document.querySelector("#reduce");
	//乘
	var multiply = document.querySelector("#multiply");
	//等于
	var res = document.querySelector("#res");
	//0
	var zero = document.querySelector("#zero");
	//所有的数字键
	var input_1 = document.querySelectorAll(".num");
	
	//运算类型+ - * /
	var coun_type = "";
	//点击加、减、乘、除键时储存当前的数值
	var now_num = 0;
	//点击加减乘除键时是否更新text1的显示
	var text1_tf = true;
	//点击数字键时是否清除text2原有数字
	var text2_tf = false;
	
	//所有数字键的监听
	for (var i = 0; i < input_1.length; i++) {
		input_1[i].addEventListener("click",function(e){
			if(text2.value!=0&&!text2_tf){
				text2.value = text2.value+""+this.value;
			}else{
				text2_tf=false;
				text2.value = this.value;
			}
			text1_tf=true;
		});
	}
	//清空text2
	ce.addEventListener("click",function(e){
			text2.value = "0";
			now_num = 0;
	});
	//重置
	c.addEventListener("click",function(e){
			text1.value = "";
			text2.value = "0";
			coun_type = "";
			now_num = 0;
			text1_tf=true;
			text2_tf=false;
	});
	//删除
	del.addEventListener("click",function(e){
		var str = text2.value;
		if(str.length>1){
			text2.value = str.substring(0,str.length-1);
		}else{
			text2.value = "0";
		}
	});
	//加
	add.addEventListener("click",function(e){
		console.log(now_num);
		if(text1_tf){
			if(text1.value!=""){
				text1.value = text1.value+" "+text2.value+" +";
			}else{
				text1.value = text2.value+" +";
			}
			if(coun_type!=""){
				count(coun_type,parseInt(now_num),parseInt(text2.value));
				text2.value = now_num;
			}else{
				now_num = parseInt(text2.value);
			}
			text2_tf=true;
			text1_tf = false;
		}
		coun_type="+";
	});
	//减
	reduce.addEventListener("click",function(e){
		console.log(now_num);
		if(text1_tf){
			if(text1.value!=""){
				text1.value = text1.value+" "+text2.value+" -";
			}else{
				text1.value = text2.value+" -";
			}
			if(coun_type!=""){
				console.log(coun_type);
				count(coun_type,parseInt(now_num),parseInt(text2.value));
				text2.value = now_num;
			}else{
				now_num = parseInt(text2.value);
			}
			text2_tf=true;
			text1_tf = false;
		}
		coun_type="-";
	});
	//乘
	multiply.addEventListener("click",function(){
		if(text1_tf){
			if(text1.value!=""){
				text1.value = text1.value+" "+text2.value+" *";
			}else{
				text1.value = text2.value+" *";
			}
			if(coun_type!=""){
				console.log(coun_type);
				count(coun_type,parseInt(now_num),parseInt(text2.value));
				text2.value = now_num;
			}else{
				now_num = parseInt(text2.value);
			}
			text2_tf=true;
			text1_tf = false;
		}
		coun_type="*";
	});
	//等于
	res.addEventListener("click",function(e){
		if(coun_type!=""){
			count(coun_type,parseInt(now_num),parseInt(text2.value));
			text2.value=now_num;
			text1.value=""
			coun_type="";
			text1_tf=true;
			text2_tf=true;
		}
	});
	//加减乘除运算
	function count(type,num1,num2){
		switch(type){
			case "+":
				now_num=num1+num2;
				break;
			case "-":
				now_num=num1-num2;
				break;
			case "*":
				now_num=num1*num2;
				break;
		}
		return;
	}
	//按键监听
	document.onkeydown=function(){
		var code = event.keyCode;
		if(event.shiftKey&&code==187){
			//加
			if(text1_tf){
				if(text1.value!=""){
					text1.value = text1.value+" "+text2.value+" +";
				}else{
					text1.value = text2.value+" +";
				}
				if(coun_type!=""){
					count(coun_type,parseInt(now_num),parseInt(text2.value));
					text2.value = now_num;
				}else{
					now_num = parseInt(text2.value);
				}
				text2_tf=true;
				text1_tf = false;
			}
			coun_type="+";
		}else if(code==108||code==13||code==187){
			//Enter、=
			if(coun_type!=""){
				count(coun_type,parseInt(now_num),parseInt(text2.value));
				text2.value=now_num;
				text1.value=""
				coun_type="";
				text1_tf=true;
				text2_tf=true;
			}
		}else if(code==27){
			text1.value = "";
			text2.value = "0";
			coun_type = "";
			now_num = 0;
		}else if(code>=48&&code<=57){
			//code码：96-105代表数字键1-9-0
			if(text2.value!=0&&!text2_tf){
				text2.value = text2.value+""+(code-48);
			}else{
				text2_tf=false;
				text2.value = code-48;
			}
			text1_tf=true;
		}else if(code>=96&&code<=105){
			//code码：96-105代表数字键0-9
			if(text2.value!=0&&!text2_tf){
				text2.value = text2.value+""+(code-96);
			}else{
				text2_tf=false;
				text2.value = code-96;
			}
			text1_tf=true;
		}else if(code>=106&&code<=111){
			//code码：106-111分别代表 * + Enter - . /
			switch(code){
				//乘
				case 106:
					break;
				//加
				case 107:
					if(text1_tf){
						if(text1.value!=""){
							text1.value = text1.value+" "+text2.value+" +";
						}else{
							text1.value = text2.value+" +";
						}
						if(coun_type!=""){
							count(coun_type,parseInt(now_num),parseInt(text2.value));
							text2.value = now_num;
						}else{
							now_num = parseInt(text2.value);
						}
						text2_tf=true;
						text1_tf = false;
					}
					coun_type="+";
					break;
				//减
				case 109:
					if(text1_tf){
						if(text1.value!=""){
							text1.value = text1.value+" "+text2.value+" -";
						}else{
							text1.value = text2.value+" -";
						}
						if(coun_type!=""){
							count(coun_type,parseInt(now_num),parseInt(text2.value));
							text2.value = now_num;
						}else{
							now_num = parseInt(text2.value);
						}
						text2_tf=true;
						text1_tf = false;
					}
					coun_type="-";
					break;
				//点
				case 110:
					break;
				//除
				case 111:
					break;
			}
		}
	}
	document.onkeypress=function(){
		var code = event.keyCode;
	}
</script>
</html>